<v-dialog v-model="dialog" width="90%" max-width="900px">
  <v-card>
    <v-card-title class="title">Welcome to ParaView Glance!</v-card-title>
    <v-card-text class="body-2">
      <p>
        You may experience slower rendering speeds because of the following
        reason(s):
      </p>
      <ul class="pl-10">
        <li v-if="issues.webglVersion">
          Detected WebGL version {{ issues.webglVersion }}. For best performance,
          please use a computer and/or browser with at least WebGL 2.
        </li>
        <li v-if="issues.integratedGPU">
          Using GPU "{{ issues.integratedGPU }}". A dedicated GPU would
          offer better performance.
          <a rel="noopener noreferrer" target="_blank" href="https://wevideo.zendesk.com/hc/en-us/articles/225259448-How-to-enable-WebGL">
            More info on enabling dedicated GPUs in browsers.
          </a>
        </li>
      </ul>
    </v-card-text>
    <v-card-actions class="d-flex justify-space-between align-center pa-5">
      <v-checkbox
        label="Don't show again"
        class="mt-0 pt-0"
        hide-details
        :value="suppressBrowserWarning"
        @input="setSuppressBrowserWarning"
      />
      <v-btn
        color="primary"
        v-on:click="dialog = false"
      >
        Okay
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
